<template>
  <el-dialog v-model="visible" width="500">
    <div style="margin-bottom: 20px">
      检出功能是将云端文件下载至任务执行的工作目录，确定检出么？
    </div>
    <template #title>
      <div style="display: flex; align-items: center">
        <img
          style="display: block; margin-right: 5px"
          src="@/assets/warn.svg"
          alt=""
        />
        <div>检出提示</div>
      </div>
    </template>
    <template #footer>
      <div class="footer">
        <el-checkbox
          v-model="check"
          label="同名文件替换"
          style="margin-right: auto"
          size="small"
        />
        <el-button size="small" @click.stop="handleCancel">取消</el-button>
        <el-button size="small" type="primary" @click="handleSure">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import { ref, defineExpose } from "vue";

  const visible = ref(false);
  const check = ref(false);
  defineExpose({
    visible,
    check,
  });
  defineProps([""]);

  /**
   * @description 处理取消
   */
  const handleCancel = () => {
    visible.value = false;
  };

  /**
   * @description 处理确定
   */
  const handleSure = () => {
    visible.value = false;
  };
</script>

<style scoped lang="scss">
  .footer {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
</style>
